<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name=viewport content="width=device-width,initial-scale=1">
		<title>登录</title>
		<link rel="stylesheet" href="${ctxStatic}/jiujiudevice/css/public.css?v=111" />
		<script type="text/javascript" src="${ctxStatic}/jiujiudevice/js/jquery-1.9.1.min.js" ></script>
	</head>
	<body style="background: #FFFFFF;">
		<div id="login" style="text-align: center;">
			<div style="border-radius: 10px; height: 60px; width: 60px; background: #00da81; margin: 15% auto;">
				
			</div>
		</div>
		<div class="main">
			<div class="telphone">
				<i class="iconfont icon-shouji"></i>
				<input type="tel" id="mobile" placeholder="请输入您的手机号" value="" />
			</div>
			<div class="password">
				<i class="iconfont icon-baozhang"></i>
				<input style="width: 60%;" type="number" id="code" placeholder="请输入验证码" value="" />
				<button class="btncode" id="sendSmsBtn"  onclick="sendCode()">发送验证码</button>
			</div>
		</div>
		<div style="margin:10%">
			<button class="btn-login" id="loginBtn" style="margin-bottom: 16px;" onclick="login()">登 录</button>
			<p class="desc">点击注册，即表示同意<i style="color: #00DA81;" onclick="$('.fade').show()">《服务协议》</i></p>
		</div>
	     <div class="fade" style="display:none ;">
			<div class="section3">
				<span onclick="$('.fade').hide()" style="position: fixed; top: 20px; right: 5px;">
				<img src="${ctxStatic}/jiujiudevice/img/close.png" width="24px">
			</span>
				<p style="text-align: center; font-size: 16px;">《用户协议》</p>
				<p style="font-weight: bold;">服务条款</p>
			
				<p style="text-indent:2em;">与用户共同确认：</p>
				<p style="text-indent:2em;">1. 用户点击注册页面的同意注册按钮并完成注册程序、获账号和密码时，视为用户与已达成《用户协议》，就用户进入（即用户通过与商家进行家庭服务交易）达成本协议的全部约定。</p>
				<p style="text-indent:2em;">2. 用户均已认真阅读本《用户协议》(下称“本协议”)中全部条款（特别是以黑体字标示出的关于及用户重大权益的条款）及发布的其他全部服务条款和操作规则的内容，对本协议及前述服务条款和规则均以知晓、理解并接受，同意将其作为确定双方权利义务的依据。《法律声明》为本协议的必要组成部分，用户接受本协议的同时即视为接受《法律声明》的全部内容。
				</p>

				本协议于用户点击注册并完册程序、获得账号和密码时生效，对和用户均具有约束力。
			</div>
		</div>
	</body>
<script type="text/javascript" src="${ctxStatic}/jiujiudevice/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
	var sendState = false; //发送状态
	var countdown = 60; //倒计时时间
	/**
	 * 发送验证码
	 */
	function sendCode() {
		var mobile = $('#mobile').val();
		if(!mobile){
			alert("请先输入手机号");
			return;
		}
		var reg = /^1[345789][0-9]{9}$/; //验证规则，
		var flag = reg.test(mobile); //true
		if(!reg.test(mobile)){
			alert("请输入正确的手机号码");
			return false;
		}
		var code = $('#code').val();
		var obj = $("#sendSmsBtn");
		$.ajax({
			url:"${ctxFront }/jiujiudevice/sendEditMobileSMS",
			dataType:"json",
			type:'post',
			data:{
				mobile:mobile
			},
			success:function(re){
				if(re.code=="200"){
					settime(obj);
				}
				alert(re.message);
			}
		})
	}
	/**
	 * 倒计时效果
	 * @param {Object} obj
	 */
	function settime(obj) { //发送验证码倒计时
		if(countdown == 0) {
			sendState = false;
			obj.attr('disabled', false);
			//obj.removeattr("disabled"); 
			obj.text("获取验证码");
			countdown = 60;
			return;
		} else {
			sendState = true;
			obj.attr('disabled', true);
			obj.text("" + countdown + "s后重发");
			countdown--;
		}
		setTimeout(function() {
			settime(obj)
		}, 1000)
	}
	function check(){
		var mobile = $('#mobile').val();
		var code = $('#code').val();
		if(!mobile){
			alert("请输入手机号");
			return false;
		}
		var reg = /^1[345789][0-9]{9}$/; //验证规则，
		var flag = reg.test(mobile); //true
		if(!reg.test(mobile)){
			alert("请输入正确的手机号码");
			return false;
		}
		if(!code){
			alert("请先获取验证码");
			return false;
		}
		return true;
	}
	/**
	 * 登录
	 */
	function login(){
		if(!check()){
			return;
		}
		console.log('登录');
		var mobile = $('#mobile').val();
		var code = $('#code').val();
		var obj = $("#sendSmsBtn");
		//settime(obj);
		$.ajax({
			url:"${ctxFront }/jiujiudevice/login",
			dataType:"json",
			method:"POST",
			data:{
				mobile:mobile,
				code:code
			},
			success:function(re){
				alert(re.message);
				if(re.code == "200"){
					location.href="${ctxFront }/jiujiudevice/usercenter";	
				}
			}
		})
	}
	</script>
</html>
